<template>
	<view>
		<view v-if="isLogin">
			<view class="head-container">
				<image :src="avatar" mode="aspectFill" class="img-avatar"></image>
				<view class="user-info-container">
					<view class="nick-type-container">
						<text class="nick-badge">{{nick+"["+userTypes[type-1]+"]"}}</text>
						<image :src="badges[type-1]" mode="widthFix" class="img-badge"></image>
					</view>
					<text class="user-email">{{name+':'+email}}</text>
				</view>
			</view>
			<text class="iconfont icon-icon_logout" @click="clickLogout"></text>
			<view class="data-container">
				<!-- 类别数据管理 -->
				<view class="data-title-container" @click="clickSwitchPanel(0)">
					<text class="title-name">管理{{categories.length}}个类别数据</text>
					<text
						:class="panelStatus[0].visible?'iconfont icon-arrow-up-filling ic-arrow':'iconfont icon-icon-arrow-down-filling'"></text>
				</view>
				<view v-if="panelStatus[0].visible" class="category-container">
					<view v-for="(c,index) in categories" class="item-catagory" :key="c.id">
						<text class="category-name" @click="clickToUpdate(c.id,c.name)">{{c.name}}</text>
						<text :class="c.count==0?'btn-del':'category-num'"
							@click="c.count==0?clickDelete(c.id,c.name):''">{{c.count==0?'X':c.count}}</text>
					</view>
					<view class="item-category" @click="clickToAdd">
						<text class="iconfont icon-tinajia"></text>
					</view>
				</view>
			</view>
			<!-- 标签数据管理 -->
			<view class="data-container">
				<view class="data-title-container " @click="clickSwitchPanel(1)">
					<text class="title-name">管理{{tags.length}}个标签数据</text>
					<text
						:class="panelStatus[1].visible?'iconfont  icon-arrow-up-filling':'iconfont icon-icon-arrow-down-filling'"></text>
				</view>
				<view v-if="panelStatus[1].visible" class="tags-container">
					<view v-for="(t,index) in tags" class="item-tag" :key="t.id">
						<text class="tag-name" @click="clickToUpdate(t.id,t.name)">{{t.name}}</text>
						<text :class="t.count==0?'btn-del':'tag-num'"
						@click="t.count==0?clickDelete(t.id,t.name):''">{{t.count==0?'X':t.count}}</text>
					</view>
					<view class="item-tag"  @click="clickToAdd">
						<text class="iconfont icon-tinajia"></text>
					</view>
				</view>
			</view>
			<view class="data-container">
				<!-- 我点赞的博客 -->
				<view class="data-title-container" @click="clickSwitchPanel(2)">
					<text class="title-name">我点赞的{{goodCount}}个博客</text>
					<text
						:class="panelStatus[2].visible?'iconfont  icon-icon_icon_up ic-arrow':'iconfont icon-icon-arrow-down-filling ic-arrow'"></text>
				</view>
				<scroll-view v-if="panelStatus[2].visible" scroll-x class="scroll" lower-threshold="100"
					show-scrollbar="false" scroll-with-animation @scrolltolower="getBlogs">
					<view class="scroll-item" v-for="(blog,index) in goodBlogs" :key="'good'+blog.id"
						@click="tapGoBlog(blog.id)">
						<image :src="blog.picture" mode="aspectFill"></image>
						<text>{{blog.title}}</text>
					</view>
				</scroll-view>
			</view>
		</view>
		<login-dialog ref="login" @after="afterLogin"></login-dialog>
		<dialog-shell ref="addShell" title="添加新类别" @confirm="confirmAdd">
			<input type="text" placeholder="请输入类别名称" @input="inputGetName" focus
				style="margin: 20rpx; padding-left: 10rpx;" />
		</dialog-shell>
		<dialog-shell ref="updateShell" title="更新类别" @confirm="confirmUpdate">
			<input type="text" :value="oldValue" placeholder="请输入类别名称"></input>
		</dialog-shell>
	</view>
</template>

<script>
	const app = getApp()
	let newName = ''
	let updateId = ''
	let page = 0
	let ids = []
	export default {
		data() {
			return {
				isLogin: app.globalData.token.length > 0,
				avatar: this.$params.host + app.globalData.avatar,
				type: app.globalData.type,
				name: '',
				email: '',
				nick: '',
				userTypes: ["管理员", "认证博主", "博客会员"],
				badges: ['/static/badge0.png', '/static/badge1.png', '/static/badge2.png'],
				categories: [],
				tags: [],
				blogs: [],
				good_ids: [],
				panelStatus: [{
					visible: false
				}, {
					visible: false
				}, {
					visible: false
				}], //用于判断当前数据面板的开关状态		
				goodCount: -1,
				goodBlogs: [],
				oldValue: ''
			}
		},
		mounted() {
			console.log("mmm");
			if (!this.isLogin) {
				this.$refs.login.show()
			}
		},

		onShow() { //tab页面切换时要加载数据，以防在其他页面登录后本页面空白
			if (!this.isLogin) {
				return
			}
			this.loadData()
		},
		onLoad() {
			this.getGoodBlogs()
			this.$noti.add(this.$params.noti_login_status, this, this.afterLogin)
		},
		onUnload() {
			this.$noti.remove(this.$params.noti_login_status, this)
		},
		methods: {
			//登录后数据进行更新
			afterLogin(logout) {
				if (this.isLogin || logout) {
					return
				}

				this.isLogin = app.globalData.token.length > 0
				this.avatar = this.$params.host + app.globalData.avatar
				this.type = app.globalData.type
				this.name = app.globalData.userName
				this.email = app.globalData.email
				this.nick = app.globalData.nickName
				this.$refs.login.hide()
				// uni.removeStorageSync(this.$params.key_good_ids)
				this.loadData()
			},
			// 
			loadData() {
				page = 0
				this.goodBlogs = []
				this.goodCount = -1
				if (this.goodCount < 0) {
					this.getLocalGood()
				}
				this.getCategories()
				this.getTags()
				this.getBlogs()
				this.getBlogs()
			},
			//注销
			clickLogout() {
				this.isLogin = false
				app.globalData.avatar = '../../static/default_user.png'
				app.globalData.uid = ''
				app.globalData.type = -1
				app.globalData.email = ''
				app.globalData.nickName = ''
				app.globalData.userName = ''
				app.globalData.token = ''
				this.$noti.post(this.$params.noti_login_status, true)
			},
			getLocalGood() {
				let local = uni.getStorageSync(this.$params.key_good_ids)
				if (local) {
					ids = local
				}
				this.goodCount = ids.length
			},
			//点赞获取
			getBlogs() {
				if (this.goodCount >= 0 && this.goodBlogs.length == this.goodCount) {
					return
				}
				let url = this.$params.host + this.$params.action_blog + ids[page++]
				this.$request.get(url, res => {
					let b = res.data.data
					if (!b.picture.startsWith('http')) {
						b.picture = this.$params.host + b.picture
					}
					this.goodBlogs.push(res.data.data)
				})
			},
			tapGoBlog(id) {
				uni.navigateTo({
					url: `/pages/blog/blog?id=${id}`,
					success: res => {},
					fail: () => {},
					complete: () => {}
				})
			},
			//获取类别
			getCategories() {
				this.categories = []
				let url = this.$params.host + this.$params.action_categories
				this.$request.get(url, res => {
					// let categories = res.data.data
					// this.categories = categories
					url = this.$params.host + this.$params.action_category_count
					let i = 0
					res.data.data.forEach(async (c) => {
						let res = await this.$request.request(url + c.id)
						if (res.success) {
							let category = {
								id: c.id,
								name: c.name,
								count: res.data
							}
							this.categories.push(category)
						}
					})
					console.log(res);
				})
			},
			//获取标签
			getTags() {
				this.tags = []
				let url = this.$params.host + this.$params.action_tags
				this.$request.get(url, res => {
					// let tags = res.data.data
					// this.tags = tags
					url = this.$params.host + this.$params.action_tags_count
					let i = 0
					res.data.data.forEach(async (t) => {
						
						let res = await this.$request.request(url + t.id)
						if (res.success) {
							let tag = {
								id: t.id,
								name: t.name,
								count: res.data
							}
							this.tags.push(tag)
						}
					})
					
				})
			},


			//获取赞过的文章
			getGoodBlogs() {
				let ids = uni.getStorageSync(this.$params.key_good_ids)
				if (ids) {
					this.good_ids = ids
				}
				this.good_ids.forEach(b => {
					let url = this.$params.host + this.$params.action_blog + b
					this.$request.get(url, res => {
						this.goodBlogs.push(res.data.data)
						let blog = res.data.data
						if (!blog.picture.startsWith('http')) {
							blog.picture = this.$params.host + blog.picture
						}
					})
				})
			},
			clickSwitchPanel(index) {
				let now = this.panelStatus[index].visible
				this.panelStatus[index].visible = !now
			},

			clickToAdd() {
				this.$refs.addShell.showDialog()
			},
			inputGetName(e) {
				newName = e.detail.value
			},
			confirmAdd() {
				if (!this.$utils.checkLength(newName, 2, "类别名称")) {
					return
				}
				let url = this.$params.host + this.$params.action_category_add
				let data = {
					token: app.globalData.token,
					name: newName
				}
				this.$request.request(url, data, 'POST').then(res => {
					if (res.success) {
						let item = {
							id: res.data.id,
							name: res.data.name,
							count: 0
						}
						this.categories.push(item)
						newName = ""
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				}).catch(err => {
					newName = ""
					// console.log(err);
				})
			},
			clickToUpdate(id, name) {
				this.oldValue = name
				newName = name
				updateId = id
				this.$refs.updateShell.showDialog()
			},
			confirmUpdate() {
				if (!this.$utils.checkLength(newName, 2, '类别名称')) {
					return
				}
				let url = this.$params.host + this.$params.action_category_update + updateId
				let data = {
					token: app.globalData.token,
					name: newName
				}
				this.$request.request(url, data, 'PUT').then(res => {
					if (res.success) {
						this.categories.forEach(c => {
							c.name = res
							if (c.id == res.data.id) {
								c.name = res.data.name
							}
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				}).catch(err => {
					console.log(err);
				})
			},

			clickDelete(id, name) {
				let url = this.$params.host + this.$params.action_category_delete + id
				let data = {
					token: app.globalData.token
				}
				uni.showModal({
					title: '删除确认',
					content: `确定要删除${name}吗`,
					showCancel: true,
					cancelText: '算了',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							this.$request.deleteParams(url, data, res => {
								if (res.success) {
									this.categories = this.categories.filter(c => c.id != id)
								} else {
									uni.showToast({
										title: res.message,
										icon: 'none'
									});
								}
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>
<style>
	@import url("profile.css");
</style>